<template>
    <li class="ea-sub-menu py-5" role="menuitem">
        <template v-if="menuOptions.mode === 'folding'">
            <div class="sub-menu_title text-sm px-8">
                <slot v-if="$slots.title" name="title" />
                <div v-else class="w-full h-full">{{ props.title }}</div>
            </div>
            <ul role="menu">
                <slot />
            </ul>
        </template>
        <template v-if="menuOptions.mode === 'unfolding'">
            <div class="sub-menu_title text-lg relative" @click="toggleMenu">
                <slot v-if="$slots.title" name="title" />
                <div v-else class="w-full h-full">{{ props.title }}</div>
                <EaSvgIcon
                    :icon-name="'arrow-down'"
                    icon-class="unfolding-icon"
                    class="absolute right-[10px] top-1/2 -translate-y-1/2"
                    :class="{ 'rotate-180': isOpen }"
                />
            </div>
            <Transition name="collapse" @enter="onEnter" @leave="onLeave">
                <ul v-show="isOpen" role="menu" class="overflow-hidden text-lg">
                    <slot />
                </ul>
            </Transition>
        </template>
    </li>
</template>
<script lang="ts" setup>
import { inject, ref, computed } from 'vue'
import type { MenuOptions } from './types'
import { EaSvgIcon } from '@/components'

interface Props {
    title?: string
    index?: string
}
const props = withDefaults(defineProps<Props>(), {
    title: '',
    index: '',
})

const menuOptions = inject<MenuOptions>('menuOptions', {
    activeIndex: ref(''),
    mode: 'folding',
    uniqueOpened: false,
    openedSubMenus: ref(new Set()),
    toggleSubMenu: () => {},
})

// 为子菜单生成唯一ID
const subMenuId = computed(() => props.index || `submenu-${Math.random().toString(36).substr(2, 9)}`)

// 根据父级状态计算是否展开
const isOpen = computed({
    get: () => menuOptions.openedSubMenus.value.has(subMenuId.value),
    set: (value: boolean) => {
        console.log(value);
        
        if (value) {
            menuOptions.toggleSubMenu(subMenuId.value)
        } else if (isOpen.value) {
            menuOptions.toggleSubMenu(subMenuId.value)
        }
    },
})

// 切换菜单展开/折叠状态
const toggleMenu = () => {
    console.log(subMenuId.value);
    
    menuOptions.toggleSubMenu(subMenuId.value)
}

// 组件挂载时不再自动展开，由父组件EaMenu控制
// 移除了原来的自动展开逻辑，现在完全由EaMenu组件的setDefaultOpenedSubMenus管理

// 进入动画钩子 - 用于高度动画
const onEnter = (el: Element) => {
    const element = el as HTMLElement
    // 初始状态：高度为0，透明度为0
    element.style.height = '0'
    element.style.opacity = '0'

    // 强制重绘，确保初始状态生效
    void element.offsetHeight

    // 设置过渡动画
    element.style.transition = 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-in-out'
    // 展开到实际高度
    element.style.height = element.scrollHeight + 'px'
    element.style.opacity = '1'
}

// 离开动画钩子 - 用于高度动画
const onLeave = (el: Element) => {
    const element = el as HTMLElement
    // 设置当前高度和透明度
    element.style.height = element.scrollHeight + 'px'
    element.style.opacity = '1'

    // 强制重绘
    void element.offsetHeight

    // 设置过渡动画
    element.style.transition = 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-in-out'
    // 收缩到0高度
    element.style.height = '0'
    element.style.opacity = '0'
}
</script>
<style lang="scss" scoped>
:global(.ea-menu .ea-sub-menu:first-of-type) {
    border-top: 0;
}
.unfolding-icon {
    transition: all 0.3s ease-in-out;
    width: 1em;
    height: 1em;
    margin-top: 2px;

    &.rotate-90 {
        transform: rotate(90deg) !important;
    }
}
</style>
